<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东分类</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <header>
        <div class="msCancelBtn">
            <span></span>
        </div>
        <div class="jd-header-search-input">
            <i></i>
            <input type="text" placeholder="西门子冰箱">
        </div>
    </header>
    <main>
        <ul class="menu">
            <li class="menu-item active">热门推荐</li>
            <li class="menu-item">手机数码</li>
            <li class="menu-item">京东超市</li>
            <li class="menu-item">家用电器</li>
            <li class="menu-item">电脑办公</li>
            <li class="menu-item">玩具乐器</li>
            <li class="menu-item">家居厨具</li>
            <li class="menu-item">家具家装</li>
            <li class="menu-item">内衣配饰</li>
            <li class="menu-item">男装</li>
            <li class="menu-item">男鞋</li>
            <li class="menu-item">女装</li>
        </ul>
        <div class="branch on">
            <h4>热门分类</h4>
            <a href="javascript:void(0);">
                <i class="rank-icon"></i>
                <span>排行榜</span>
                <i class="right-arrow"></i>
            </a>
            <ul class="categor">
                <li>
                    <img src="./images/kongtiao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kouzhao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/iphone.png">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kongtiao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kongtiao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/shuihu.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kongtiao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kongtiao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/shuihu.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kongtiao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kouzhao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/iphone.png">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kongtiao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kouzhao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/iphone.png">
                    <span>空调</span>
                </li>
            </ul>
        </div>
        <div class="branch">
            <h4>热门分类</h4>
            <a href="javascript:void(0);">
                <i class="rank-icon"></i>
                <span>排行榜</span>
                <i class="right-arrow"></i>
            </a>
            <ul class="categor">
                <li>
                    <img src="./images/lingshi.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kouzhao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/iphone.png">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kongtiao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kongtiao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/shuihu.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kongtiao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kongtiao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/shuihu.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kongtiao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kouzhao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/iphone.png">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kongtiao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kouzhao.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/iphone.png">
                    <span>空调</span>
                </li>
            </ul>
        </div>
        <div class="branch">
            <h4>热门分类</h4>
            <a href="javascript:void(0);">
                <i class="rank-icon"></i>
                <span>排行榜</span>
                <i class="right-arrow"></i>
            </a>
            <ul class="categor">
                <li>
                    <img src="./images/lingshi.jpg">
                    <span>空调</span>
                </li>
                <li>
                    <img src="./images/kouzhao.jpg">
                    <span>空调</span>
                </li>
            </ul>
        </div>
        <div class="branch">
            <h4>热门分类</h4>
            <a href="javascript:void(0);">
                <i class="rank-icon"></i>
                <span>排行榜</span>
                <i class="right-arrow"></i>
            </a>
            <ul class="categor">
                <li>
                    <img src="./images/lingshi.jpg">
                    <span>零食</span>
                </li>
                <li>
                    <img src="./images/kouzhao.jpg">
                    <span>空调</span>
                </li>
            </ul>
        </div>
        <div class="branch">
            5
        </div>
        <div class="branch">6</div>
        <div class="branch">7</div>
        <div class="branch">8</div>
        <div class="branch">9</div>
        <div class="branch">10</div>
        <div class="branch">11</div>
        <div class="branch">12</div>
    </main>
    <footer>
        <div>
            <img src="./images/menu01.png" class="pic">
        </div>
        <div>
            <img src="./images/menu02.png" class="pic">
        </div>
        <div>
            <img src="./images/menu03.png" class="pic">
        </div>
        </div>
        <div>
            <img src="./images/menu04.png" class="pic">
        </div>
        </div>
        <div>
            <img src="./images/menu05.png" class="pic">
        </div>
        </div>
    </footer>
    <script src="./js/index.js"></script>
</body>

</html>